<template>
<h1>个人简历</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="120"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="i in person.friends">{{i}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load">点击加载</button>
</template>
<script setup>
import {ref} from "vue";

const person=ref({
  name:'',
  age:'',
  imgUrl:'',
  friends:[]
})
const load=()=>{
  person.value={
    name:'范传奇',
    age:'18',
    imgUrl:'fcq.jpg',
    friends:['李思思','王克晶','古田可']
  }
}
</script>


<style scoped>

</style>